<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{text-decoration:none;}
			img{ position: absolute; left: 200px; top: 50px;}
			.img1{display:block;}
			.img2{display:none;}
			ul{ width:300px; height:50px;position: absolute; top: 450px; left:400px;}
			ul li{ float:left; list-style: none;}
			ul li a{ color:#fff;display: block; width: 20px; text-align: center; line-height: 20px; height: 20px; border-radius: 50%; background: #333; margin-left: 20px;;}
			div{ width: 28px; height: 62px; cursor:pointer; line-height: 62px; text-align: center; background:#ccc; opacity: 0.5; position:absolute;}
			.box1{ left:200px; top: 230px;}
			.box2{ left:902px; top: 230px;}
		</style>
	</head>
	<script src="js/jquery.js"></script>
	<script>
		$(document).ready(function(){
			var i=0;
			var img=$('img')
			var img1=$('img:first')
			var img2=$('img:last')
			img1.fadeIn();
			img2.fadeOut();
			function lunbo(){
				i++;
				$('img:hidden').attr('src','img/'+(i%6+1)+'.jpg');
				$('img').fadeToggle(500);
				$('ul li a').css('background','#333');
				$('ul li a').eq(i%6).css('background','#f00');//小图标的背景色随着图片的变化而变化
			}
			img.timer=setInterval(lunbo,3000);//每隔三秒执行一次换图
			$('div,ul li a,img').mouseout(//群组选择器，当这些元素mouseout事件执行添加定时器，定时自动轮播
				function(){	
				img.timer=setInterval(lunbo,3000);
				}
			)
			$('div,ul li a,img').mouseover(//群组选择器，这些元素mouseover事件执行清除定时器
				function(){
					
					clearInterval(img.timer);	
				}	
			);
			$('div:first').click(function(){
			
				if(i-2>0){
					i-=2;//因为每次执行轮播函数时，i都会加1；所以如果此处-1的话，执行函数后又+1，那么就相当于没有往后跳，所以需要在此处—2；
				}
				else{
					i=6//因为i不能为负数，所以如果小于零，那么就=6
				}
				lunbo();
			});
			
			$('div:last').click(function(){//右键点击时，往后跳转图片，与lunbo函数执行的方向一致，所以此处可直接执行lunbo函数即可
				lunbo();
			});
			
			$('ul li a').mouseover(function(){			
				_this=$(this);
				_this.timer=setTimeout(  //设置定时器，100毫秒之后才开始执行此函数
				function(){
				$('ul li a').css('background','#333');
				_this.css('background','#f00');
				i=_this.html()-2;
				lunbo();
					},200);
				_this.mouseout(function(){	//此处的设置效果就是，如果鼠标在此按钮停留时间不到100毫秒，那么就清除此定时器；取消本次操作，防止出现bug；
					clearTimeout(_this.timer);
					});
				
			})	;
		})
		
	</script>
	<body>
		<img class="img1" src="img/1.jpg">
		<img class="img2" src="img/2.jpg">
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">6</a></li>
		</ul>
		<div class="box1"><</div>
		<div class="box2">></div>
	</body>
</html>
